<template>
  <div class="product-list">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in imgList" :key="index">
        <img class="img" :src="item" />
      </van-swipe-item>
    </van-swipe>

    <!-- 分类 -->
    <ul class="types bg-fff pb-10">
      <li class="type" v-for="item in typeList" :key="item.categoryId">
        <img
          :src="item.iconUrl"
          :alt="item.name"
          class="type-image"
        />
        <p class="type-name">{{item.name}}</p>
      </li>
    </ul>
    <div class="middle-content">
      <!-- 秒杀和拼团 -->
      <div class="product-miaosha bg-fff">
        <router-link to="">
          <div id="miaosha">
            <div class="right-top-text">秒杀</div>
            <div class="activity-div">
              <div class="activity-text">
                <p class="bold-text">秒杀</p>
                <p class="small-text mt-5">超值惊喜</p>
                <p class="jump-btn mt-5">立即砍价</p>
              </div>
              <img
                src="http://fresh.huruqing.cn/img/miaosha-icon.e7d1fb11.png"
                alt=""
                class="img"
              />
            </div>
          </div>
        </router-link>
        <router-link to="" href="/activity/groupBuy">
          <div id="pintuan">
            <div class="right-top-text">拼团</div>
            <div class="activity-div">
              <div class="activity-text">
                <p class="bold-text">拼团</p>
                <p class="small-text mt-5">限时拼团</p>
                <p class="jump-btn mt-5">一键拼团</p>
              </div>
              <img
                src="http://fresh.huruqing.cn/img/pintuan-icon.711363b5.png"
                alt=""
                class="img"
              />
            </div>
          </div>
        </router-link>
      </div>

      <div class="bg-fff pt-10 pl-10 pr-10">
        <a class="coupon">
          <div class="coupon__left">
            <van-icon name="coupon-o" size="16px" />
            <!-- lack of icon -->
            超值福利 | 全场减满
          </div>
          <div class="coupon__right flex aic">
            <span>立即领取</span>
            <van-icon name="arrow" style="margin-top: 2" />
          </div>
        </a>
      </div>

      <van-sticky>
        <div class="list-title bg-fff pt-10 pb-10">
          <!-- lack of icons here -->
          <div>推荐</div>
          <div class="flex fd-r">
            <div>销量</div>
            <div class="arrows flex fd-c">
              <img src="up-arrow.svg" class="arrow" alt="" />
              <img src="down-arrow.svg" class="arrow" alt="" />
            </div>
          </div>
          <div class="flex fd-r">
            <div>价格</div>
            <div class="arrows flex fd-c">
              <img src="up-arrow.svg" class="arrow" alt="" />
              <img src="down-arrow.svg" class="arrow" alt="" />
            </div>
          </div>
        </div>
      </van-sticky>
      <!-- 商品列表 -->
      <div class="item-list bg-fff">
        <ul class="flex w100pc jc-sa fww">
          <router-link
            :to="'/product/detail/' + item.productId"
            class="item"
            v-for="item in productList"
            :key="item.productId"
          >
            <div class="img-box flex jc-c">
              <img
                data-v-57ef1aa4=""
                :src="item.imgUrl"
                alt="四川安岳黄柠檬 3斤装（单果90-110g）"
              />
            </div>
            <div class="pt-10 pb-10 pl-5 pr-5">
              <h4 class="item-title f12">
                四川安岳黄柠檬 3斤装（单果90-110g）
              </h4>
              <p class="item-subtitle black f10 mt-5">
                采自“中国柠檬之都” 个头圆润均匀 地道酸爽十足
              </p>
              <div class="item-info mt-5">
                <span class="item-price"
                  >￥{{ (item.minPrice / 100).toFixed(2) }}</span
                ><span class="item-sale">销量：9998638</span>
              </div>
            </div>
          </router-link>
        </ul>
      </div>

      <Footer :fixed="true"></Footer>
    </div>
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
// 1. 导入http.js
import $http from "@/utils/http";
export default {
  components: { Footer },
  data() {
    return {
      // 商品列表
      productList: [],
      // 定义轮播图数组
      imgList: [],
      typeList: [],
    };
  },

  // 实例创建完毕
  created() {
    this.getProductList();
    this.getImgList();
    this.getTypeList();
  },

  methods: {
    // 获取轮播图片列表
    getImgList() {
      $http.get("/product/getBanners").then((res) => {
        console.log(res);
        this.imgList = res.banners;
      });
    },

    getTypeList() {
      $http.get("/category/all").then((res) => {
        console.log(res);
        this.typeList = res.list;
      });
    },

    // 发请求, 获取商品列表
    getProductList() {
      $http.get("/product/list").then((res) => {
        console.log(res);
        // 给productList重新赋值, 页面就会重新渲染
        this.productList = res.list;
      });
    },
  },
};
</script>

<style lang="less">
@import "./list.less";
</style>

<style lang="less">
.product-list {
  .my-swipe {
    .img {
      width: 100%;
      height: 210px;
    }
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }
  }
  .van-icon-coupon-o::before {
    position: relative;
    top: 3px;
  }
}
</style>
